<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
import axios from 'axios'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      ChartData: [],
      chart: null
    }
  },
  mounted() {
    axios.post('https://easy-mock.com/mock/5c37f42374255b71a6a8cb37/dicken/StoreStatistics/ShopCount')
      .then(res => {
        this.ChartData = res.data.Data
        this.initChart()
      })
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      var myformatter = (params, strLen) => {
        var newParams = ''
        var paramsLen = params.length
        var rowNumber = Math.ceil(paramsLen / strLen)
        if (paramsLen > strLen) {
          for (var p = 0; p < rowNumber; p++) {
            var tempStr = ''
            var start = p * strLen
            var end = start + strLen
            if (p === rowNumber - 1) {
              tempStr = params.substring(start, paramsLen)
            } else {
              tempStr = `${params.substring(start, end)}\n`
            }
            newParams += tempStr
          }
        } else {
          newParams = params
        }
        return newParams
      }
      var textList = []
      var dataList = []

      this.ChartData.map(item => {
        const temp = {
          name: item.KpiQty,
          symbol: 'pin',
          symbolSize: 30,
          value: item.KpiQty
        }
        textList.push(temp)
        dataList.push(item.KpiDate)
      })
      this.chart = echarts.init(this.$el)
      const bczpOption = {
        title: {
          text: '全国客流'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: dataList,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: `#000000`,
              fontsize: '1rem'
            },
            formatter: params => {
              return myformatter(params, 10)
            }
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '全国客流',
          type: 'line',
          barWidth: '60%',
          itemStyle: {
            normal: {
              label: {
                show: true
              },
              borderColor: 'red'
            }
          },
          data: textList
        }]
      }

      this.chart.setOption(bczpOption)
    }
  }
}
</script>
